<template>
  <div class="enWorkedInOrder">
    <div class="order-info">
      <ul class="pl10 pb15">
        <li class="rowflex">
          <div class="info-item c666 ">工单编号</div>
          <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span>  </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">派单人</div>
          <div>{{backgrounderInfo.loginName}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系电话</div>
          <div>{{backgrounderInfo.mobile}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">工作代码</div>
          <div>{{workOrderType.name}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666 ">任务标题</div>
          <div class="errorDescription">{{orderInfo.workOrderTitle}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666 ">任务描述</div>
          <div class="errorDescription">{{orderInfo.errorDescription}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.demand">
          <div class="info-item c666 ">任务要求</div>
          <div class="errorDescription">{{orderInfo.demand}}</div>
        </li>
        <li class="rowflex" v-if="engineerWork.state">
          <div class="info-item c666 ">完成情况</div>
          <div class="errorDescription">{{engineerWork.state}}</div>
        </li>
        <li class="rowflex" v-if="picList.length > 0">
          <div class="info-item c666">已传照片</div>
          <div class="pic-box">
            <div class="pics rowflex">
              <!--<div v-for="item in orderInfo.repairFileStorePath" class="picItem" v-bind:style="{backgroundImage: 'url(http://'+item.path+')'}"></div>-->
              <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <group gutter="0.1rem" v-if="orderInfo.evaluate" >
      <div class="star-box">
        <div class="title">任务评价</div>
        <rater :value="level"  disabled active-color="#ef5262" class="mt10"></rater>
      </div>
      <div class="suggest rowflex pl10 pt10 pb10">
        <div class="info-item c666 ">意见和建议</div>
        <div class="errorDescription">{{orderInfo.evaluate.option}}</div>
      </div>
    </group>


    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import {Group, XInput, XTextarea, Selector, Cell, Icon, XButton, PopupHeader, Popup, TransferDom, Radio, PopupPicker,Previewer,Rater } from 'vux'

  export default {
    name: "EnWorkedInOrder",
    components: {
      Group,
      XInput,
      XTextarea,
      Selector,
      Cell,
      Icon,
      XButton,
      PopupHeader,
      Popup,
      Radio,
      PopupPicker,
      Previewer,
      Rater
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        orderId: '',
        orderInfo: {},
        backgrounderInfo: {},
        workOrderType: {},
        engineerWork: {},
        level: {},
        picList: [],
        bigImgPath: [],
        //图片预览
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.enWorkedInOrder .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
        level: 0,
        formdata: {
          level: '',
          option: '',
          // mannerEvaluate: '',
          // skillEvaluate: '',
          // speedEvaluate: '',
          // useEvaluate: '',
        }
      }
    },
    mounted() {
      let id = this.$route.query.orderId
      console.log(this.$route.query.orderId)
      this.orderId = id
      this.$http.get('/work/api/workorder/'+id).then(res=> {
          this.orderInfo = res.data.data
          this.backgrounderInfo = res.data.data.backgrounder
          this.workOrderType = res.data.data.workOrderType
          this.engineerWork = res.data.data.engineerWork
          if (res.data.data.evaluate) {
            this.level = res.data.data.evaluate.level
          }
          console.log(this.orderInfo)
          if (this.engineerWork.arriveFileStore) {
            let key = this.engineerWork.arriveFileStore
            this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
              let result = res.data.data[key]
              for (var i = 0 ; i < result.length; i++){
                this.picList.push(result[i].path)
              }
              //如果有多张则在预览图中显示
              this.bigImgPath = res.data.data[key].map(item => {
                return {msrc: this._getPathNo(item.path), src:  this._getPathNo(item.path)}
              })
            })
          }
        }
      )
    },
    methods: {
      //图片预览
      show(index) {
        this.$refs.previewer.show(index)
      },
      commitEvaluate() {
        console.log(this.level)
        if (this.level == 0){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择评分'
          })
          return false
        }
        this.formdata.level = ''+this.level
        this.$http.post('/work/api/workorder/in/'+this.orderId+'/evaluate',this.formdata).then(res=>{
            let that = this
            this.$vux.toast.show({
              text: '评价成功'
            })
            setTimeout(function() {
              this.$router.push({path: '/user/repairSuccess',query: {type: 'evaluate'}})
            },800)
          }
        )

      }
    }
  }
</script>

<style lang="less">
  .enWorkedInOrder {
    padding-bottom: 0.6rem;
    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
      .errorDescription {
        width: 2.75rem;
      }
    }
    .order-info ul {
    }
    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }
    .pic-box {
      width: 2.75rem;
      .pics{
        overflow-x: auto;
        .picItem{
          display: block;
          width: 1.3rem;
          height: 0.85rem;
          margin-right: 0.05rem;
          margin-top: 0.04rem;
        }
      }
    }
    .star-box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title{
        padding-top: 0.08rem;
        width: 100%;
        height: 0.43rem;
        line-height: 0.35rem;
        font-size: 0.15rem;
        text-align: center;
        border-bottom: solid 1px #ebebeb;
      }
      img{
        width: 0.09rem;
        height: 0.09rem;
      }
    }
    .suggest{
      .info-item {
        width: 0.95rem;
      }
      .errorDescription {
        width: 2.55rem;
      }
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
